<template>
  <div>
    <div id="shuaxin">
      <div class="form1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户信息">
            <el-input v-model="formInline.tiaojian" placeholder="请输入查询条件" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="chaxunguahao">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="chakan">
        <el-radio @change="chakanquanbu" v-model="radio1" label="1" border>查看全部</el-radio>
        <el-radio v-model="radio1" label="2" border>当天挂号</el-radio>
        <el-button  @click="addguahao = true">预约挂号</el-button>
      </div>
      
      <div id="all">
        <ul class="container">
        <guaHaoComp v-for="(menzhenList,index) in menzhenList" :key="index"  :listData="menzhenList">
        </guaHaoComp>

        </ul>
      </div>
    </div>
    <div id="addxx">
      <el-dialog title="挂号添加" :visible.sync="addguahao">
        <el-form
          size="mini"
          :model="userForm"
         
          :rules="rules"
          ref="guahao"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" width="50px" prop="name">
            <el-input v-model="userForm.name" style="width: 100px"></el-input>
          </el-form-item>
           <el-form-item label="年龄" width="50px" prop="age">
            <el-input v-model="userForm.age" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="userForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="card">
            <el-input v-model="userForm.card"></el-input>
          </el-form-item>
          <el-form-item label="就诊人" prop="thepatient">
            <el-input v-model="userForm.thepatient"></el-input>
          </el-form-item>
          <el-form-item label="关系(默认为本人)" prop="relationship">
            <el-input v-model="userForm.relationship"></el-input>
          </el-form-item>
          <el-form-item label="余额" prop="balance">
            <el-input v-model="userForm.balance"></el-input>
          </el-form-item>
          <el-form-item label="科室" prop="departmentname">
            <el-select  @change="changeRole2($event,scope)" v-model="userForm.departmentname"  :remote-method="Departmentsousuo" placeholder="请选择">
              <el-option  v-for="item in Departmentlist"
                :key="item.id"
                :label="item.name"
                :value="item.name">
          
              </el-option>
             
            </el-select>
          </el-form-item>
          <el-form-item label="挂号类型" prop="type">
            <el-select @change="changeRole($event,scope)"  v-model="userForm.type"    placeholder="请选择">
              <el-option label="专家" value="专家"></el-option>
              <el-option label="普通" value="普通"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item    label="医生" prop="doctorname">
            <el-select  v-model="userForm.doctorname"  :remote-method="changeRole"  placeholder="请选择">
              <el-option  v-for="item in doctorlist"
                :key="item.id"
                :label="item.name"
                :value="item.name">
          
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="挂号时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  v-model="userForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2"></el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  placeholder="选择时间"
                  value-format="hh:mm:ss"
                  v-model="userForm.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="挂号费" prop="cost">
            <el-input v-model="userForm.cost"></el-input>
          </el-form-item>
          <el-form-item label="院区" prop="informationId">
            <el-input v-model="userForm.informationId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="lijichangjian"
              >立即创建</el-button
            >
            <el-button 
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import { getks,yssousuo,addgh,adduser,ghlist,chaxunlist } from "../../api/Department";

import GuaHaoComp from "../../components/GuaHao/GuaHaoComp";
export default {
  inject:['reload'],
  data() {
    return {
      menzhenList:[],
      listData:[],
      value:[],
      leixing:'',
      Department:'',
      addguahao:false,
      //guahaolist:false,
      yuanqu:'',
      radio1:'',
      
      yuanqu: "",
         radio1: "",
         
      userForm: {
        name: "",
        age:'',
        telephone: "",
        card: "",
        thepatient: "",
        state:'',
        relationship: "",
        balance: "",
        type:'',
        doctorname:'',
        departmentname:'',
        date:'',
        date1: "",
        date2: "",
        cost:'',
        informationId:'',
      },
      ghlist:{
        Registration_fee:''

      },
      Departmentlist:{},
      doctorlist:{},
      
    
      formInline: {
        tiaojian: "",
        name:'',
        departmentname:'',
        doctorname:''
      },
      rules: {},
      
    };
  
  },
    mounted(){
      this.Departmentsousuo();
      this.mzxx();
       
  },
  components:{GuaHaoComp},
  methods: {
    mzxx(){
      ghlist().then(res=>{
          
          this.menzhenList=res.result;
    })
    },
    chakanquanbu(){
      this.mzxx();
    },
    add() {
      this.addguahao = true;
      
    },
    lijichangjian(){
      this.userForm.date=this.userForm.date1+' '+this.userForm.date2;
      addgh(this.userForm).then(res=>{
        if(res.success){
            this.addguahao=false;
        }
      })
      adduser(this.userForm).then(res=>{
         if(res.success){
            this.addguahao=false;
        }
      })
      this.reload()
    },
    chaxunguahao(){
      chaxunlist({name:this.formInline.tiaojian,departmentname:this.formInline.tiaojian,doctorname:this.formInline.tiaojian}).then(res=>{
        
        if(res.success){
         
          this.menzhenList=[];
           this.menzhenList=res.result;
           console.log( formInline.tiaojian)
        }
      })
      if(this.formInline.tiaojian==''){
this.mzxx();
      }
    },
    currentSel(){

    },
     Departmentsousuo(){
         getks().then(res=>{
            if(res.success){
                this.Departmentlist=res.result;
            }
      })

      },
      
     
      changeRole(val){
        this.userForm.doctorname='';
        yssousuo({type:this.userForm.type,departmentname:this.userForm.departmentname}).then(res=>{
          if(res.success){
                this.doctorlist=res.result;
            }
        })
      },
      changeRole2(){
        this.userForm.doctorname='';
        yssousuo({type:this.userForm.type,departmentname:this.userForm.departmentname}).then(res=>{
          if(res.success){
                this.doctorlist=res.result;

            }
        })
      }
   }
  
}
</script>

<style  scoped>
.inpit1 {
  width: 200px;
}
.form1 {
  margin-top: 30px;
  margin-left: 40px;
}
.chakan {
  margin-left: 40px;
}

.icon1 {
  display: block;
  margin-left: 40px;
  margin-top: 70px;
}

</style>